<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的基本使用（二）</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<Mytitle></Mytitle>
		</div>
		<div id="app2">
			<Mytitle></Mytitle>
		</div>
		<script type="text/javascript">
			// 创建构造器
			const mytitle = Vue.extend({
				template:`
					<div>
						<h1>{{ title }}</h1>
						<h3>编辑：{{ name }}</h3>
					</div>
				`,
				data() {//在组件里面只能使用这种写法
					return {
						title:'某男子深夜不睡觉，下楼买吃的，竟是因为饿了',
						name:'张三'
					}
				}
			})
			//全局组件
			Vue.component('Mytitle',mytitle);
			//局部组件
			const vm = new Vue({
				el:'#app'
			});
			const vm2 = new Vue({
				el:'#app2'
			});
		</script>
	</body>
</html>
